<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>D3 Bar Chart</title>
    <script src="js/d3@7.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> -->
    <style>
        /* path.link {
            fill: none;
            stroke: #999;
            stroke-width: 1;
        } */
    </style>
</head>

<body>
    <div id="svgContainer">
        <div id="body"></div>
    </div>
    <!-- <script>
        var data = [730, 530, 330, 230, 130];
        var g = d3.select("#body").append("svg").attr("width", "100%").attr("height", "300")
            .append('g')
            .attr('transform', 'translate(30,30)');

        var rectHeight = 30;//设定矩形的高＋与下一个矩形的边距  共30px

        g.selectAll('rect')
            .data(data)
            .enter()
            .append('rect')//利用enter 创建与数据个数一样的rect矩形
            .attr('x', 0)//这里设定矩形左上顶点的x值
            .attr('y', function (d, i) {
                return rectHeight * i;//这里设定矩形左上顶点的Y值
            })
            .attr('width', function (d, i) {
                return d;
            })
            .attr('height', rectHeight - 5)//这里矩形实际的高度就是25  与下一个矩形的边距是5
            .style('fill', 'pink');
    </script> -->
    <!-- <script>
        var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
        var scaleLinear = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 250]);

        var g = d3.select("#body").append("svg").attr("width", "100%").attr("height", "300")
            .append('g')
            .attr('transform', 'translate(30,30)');

        var rectHeight = 30;//设定矩形的高＋与下一个矩形的边距  共30px

        g.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', 0)
            .attr('y', function (d, i) {
                return rectHeight * i;
            })
            .attr('width', function (d, i) {
                return scaleLinear(d);   //在这里用比例尺
            })
            .attr('height', rectHeight - 5)
            .style('fill', 'pink');
    </script> -->
    <script>
        var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
        var scaleLinear = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 500]);

        var g = d3.select("#body").append("svg").attr("width", "100%").attr("height", "300")
            .append('g')
            .attr('transform', 'translate(30,30)');

        var rectHeight = 30;//设定矩形的高＋与下一个矩形的边距  共30px

        g.selectAll('rect')
            .data(dataset)
            .enter()
            .append('rect')
            .attr('x', 0)
            .attr('y', function (d, i) {
                return rectHeight * i;
            })
            .attr('width', function (d, i) {
                return scaleLinear(d);   //在这里用比例尺
            })
            .attr('height', rectHeight - 5)
            .style('fill', 'pink');

        //定义一个x坐标轴   坐标轴的比例尺 我们跟图表的用一个
        var axisX = d3.axisBottom(scaleLinear).ticks(10);//ticks 用来设置刻度间隔  
        g.append('g')//在原有分g矩形分组里 再加一个x轴分组
            .attr('transform', 'translate(0,' + dataset.length * rectHeight + ')')
            .call(axisX);
    </script>
</body>

</html>